<template>
    <div @scroll="loadMoreData" class="color-fff pt-20 scroll-window">
        <el-row v-if="data.length > 0" :gutter="20">
            <el-col :key="index" :span="12" v-for="(item,index) in data">
                <div :class="{'mt-20':index>1}" class="idol-info pd-20 radius-10">
                    <item :item="item"></item>
                </div>
            </el-col>
        </el-row>
        <div v-else>
            <el-empty :image="empty_image"></el-empty>
        </div>
        <div class="text-center color-fff font-15 width-100% height-50">
            <el-image :src="require('@/assets/gif/global_loading.gif')" fit="cover" style="width: 40px;height:30px;" v-show="append_loading"></el-image>
        </div>
    </div>
</template>

<script>
import pageTool from '@/mixins/page'
import item from './item'
export default {
    components: {
        item,
    },
    data() {
        return {
            query: {
                page: 1,
                size: 10,
            },
            empty_image: require('@/assets/image/empty.png'),
        }
    },
    mixins: [pageTool],
    mounted() {
        this.beforeInit()
        document.title = '陪秀-我的关注'
    },
    methods: {
        beforeInit() {
            this.url = '/user-attention/index'
            this.append = true
            this.init() //重新请求数据
        },
        loadMoreData(e) {
            if (e.srcElement.scrollTop + e.srcElement.clientHeight == e.srcElement.scrollHeight) {
                // this.page++
                this.query.page++
                this.init()
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.idol-info {
    background: url('@/assets/attention/background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #151225;
}
.scroll-window {
    height: calc(100vh - 4rem - 4px);
    overflow-y: scroll;
}
.scroll-window::-webkit-scrollbar {
    display: none; /*隐藏滚动条*/
}
</style>